<template>  
    <div id="mainFrame"  v-loading="loading">
    <div id="c" v-show="isLogin">
      <el-col class="container"  :xs="0" :sm="24" :md="23" :lg="24">
      <el-row>
        <el-col :span="10" style="font-size:13px;">推荐用户</el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="margin-top:10px;padding:20px;float:left;">
        <el-avatar  class="ava" v-for="u in userList" shape="square" :size="50" :src="u.headPic"></el-avatar> 
        </el-col>
      </el-row>
       <el-row >
         <el-button @click="queryUsers()"   type="primary">换一批</el-button>
       </el-row>
      </el-col></div>


    <el-row v-for="share in shareList">
      <el-col :xs="1" :sm="3" :md="3" :lg="4">&nbsp;</el-col>
      <el-col class="container" :xs="24" :sm="14" :md="14" :lg="11">
      <el-row class="listTitle"  ><el-col :span="4" :xs="4" :sm="3" :md="3" :lg="3"> <el-avatar :size="50" :src="share.headPic"></el-avatar></el-col>
      <el-col :span="4" :xs="8" :sm="10" :md="4" :lg="5">{{share.userName}}</el-col>
      <el-col class="time" :span="4" :xs="8" :sm="10" :md="4" :lg="5">{{share.createTime}}</el-col>
       </el-row> 
        <el-row class="listContent" >
      <div v:v-html="html" class="listText" >{{share.content}}</div>
       <el-button style="float:right;z-index:999;"  @click="favoriteUser(share.userId,share.isFavorite)"   v-show="share.userName != Name" v-text="share.isFavorite == 1?'已关注':'关注'"></el-button>
       </el-row>
            <el-row class="listContent" >
      <el-col v-for="t in share.tags"  :span="2" class="listLabel" :xs="3" :sm="3" :md="3" :lg="2" ><span @click="searchByTags(t)">{{t}}</span></el-col>
       </el-row>
           <el-row >
           <el-row style="margin-bottom:20px;">
           <el-col :span="9" :xs="10" :sm="11" :md="8" :lg="9" ><el-button type="danger" icon="el-icon-caret-bottom"  @click="vote(share.shareImg[0].id,share.userId)">投票</el-button></el-col>
           <el-col :span="6" :xs="4" :sm="2" :md="8" :lg="6" >&nbsp;</el-col>
           <el-col :span="9" :xs="10" :sm="11" :md="8" :lg="9" ><el-button type="danger" icon="el-icon-caret-bottom"  @click="vote(share.shareImg[1].id,share.userId)">投票</el-button></el-col>
           </el-row>
           
      <el-col :span="9" :xs="10" :sm="11" :md="8" :lg="9" ><el-image class="listImage" :src="share.shareImg[0].imgUrl"  :preview-src-list="[share.shareImg[0].imgUrl]"></el-image></el-col>
      <el-col :span="6" :xs="4" :sm="2" :md="8" :lg="6" ><el-image class=".vs" :src="vs"></el-image></el-col>
       <el-col :span="9" :xs="10" :sm="11" :md="8" :lg="9" ><el-image class="listImage" :src="share.shareImg[1].imgUrl" :preview-src-list="[share.shareImg[1].imgUrl]"></el-image></el-col>
       </el-row>
       <el-row  >
      <el-col :span="9" :xs="10" :sm="10" :md="10" :lg="9"  ><el-progress :percentage="share.shareImg[0].count==0?0: Math.ceil(share.shareImg[0].count/share.total*100)"></el-progress>{{share.shareImg[0].count}}人</el-col>
       <el-col :span="6" :xs="4" :sm="4" :md="4" :lg="6"  >&nbsp;</el-col>
       <el-col :span="9"  :xs="10" :sm="10" :md="10" :lg="9" ><el-progress :percentage=" share.shareImg[1].count==0?0:Math.floor(share.shareImg[1].count/share.total*100)"></el-progress>{{share.shareImg[1].count}}人</el-col>
       </el-row>
       <el-row class="comment" v-show="share.commentList != ''">
         <el-col :span="24" >全部评论</el-col>
       </el-row>
       <el-row v-for=" comment in share.commentList">
       <el-row class="commentArea"><span style="font-size:13px;color:#606266;float:right;">{{comment.createTime}}</span>
         <div class="commentAvatar"><el-avatar :size="30" :src="comment.headPic"></el-avatar>
         <div class="commentText">&nbsp;{{comment.userName}}:&nbsp;&nbsp;<span style="font-size:13px;margin-bottom:10px;">{{comment.content}}</span></div>
         </div>
       </el-row>              
       </el-row>

       
       <el-row class="listFoot" >
           <el-col :span="18"><el-input
  type="textarea"
  placeholder="请输入内容"
  maxlength="20"
  v-model="share.comment"
  show-word-limit
>
</el-input></el-col><el-col :span="6"><el-button type="primary" icon="el-icon-check" @click="commentSubmit(share.comment,share.id,share.userId)">提交评论</el-button></el-col>
       </el-row>
      </el-col>
    </el-row> 
    </div>  
</template>
<script>
export default {
  name: 'App',
  data(){
      return{
          shareList:'',
          img:['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584451992335&di=1fbaf54893c40ab3bd778e92722b640a&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg',
          'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584452056764&di=1632ec01ff5bd3092bd3b71ead290965&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F21%2F09%2F01200000026352136359091694357.jpg'],
          fish:'https://fishandbearpaw.oss-cn-hangzhou.aliyuncs.com/systemImg/fish.png',
          bearPaw:'https://fishandbearpaw.oss-cn-hangzhou.aliyuncs.com/systemImg/bearPaw.png',
          vs:'https://fishandbearpaw.oss-cn-hangzhou.aliyuncs.com/systemImg/vs.png',
          circleUrl:'http://fishandbearpaw.oss-cn-hangzhou.aliyuncs.com/headPic/20200317134822n46o.png',
          Name:'',
          loadging:true,
          show:false,
          userList:'',
          isLogin:true,
          searchContent:''
      }

  },
  watch: {
      searchContent(val,oldval){
       this.getListData(null,val,null);
      }
  },
  mounted() {
      this.searchContent = this.$route.query.content;
      this.getListData(this.$session.get('USERID'),null,null);     
      this.Name = this.$session.get('USERNAME'); 
        var userId = this.$session.get('USERID');
        if(userId == '' || typeof userId === 'undefined'){
            this.isLogin = false;
        }
        else{
              this.queryUsers();
        }
  },
  methods: {
     
      queryUsers(){
             var that = this;
         that.$axios.post('user/queryUserRandom',{userId:that.$session.get('USERID')}).then(function(res){
               if(res.data.code == 200){
                   that.userList = res.data.body;
               }
             
    }).catch(function (error) {
        that.$message.error('请检查网络是否通畅');
    });
      },
      commentSubmit(comment,id,authorId){
        var userId = this.$session.get('USERID');
        if(userId == '' || typeof userId === 'undefined'){
               this.$message({
          message: '请先登录再进行操作',
          type: 'warning'
        });
        return false;}
        var that = this;
         that.$axios.post('share/addComment',{userId:userId,
                                            authorId:authorId, 
                                            shareId:id,
                                            content:comment}).then(function(res){
               if(res.data.code == 200){
                      that.$message({
                   message: res.data.body,
                   type: 'success'
        });
        that.getListData(userId,null,null);
               }
               else{
                   that.$message.error(res.data.body);
               }
    }).catch(function (error) {
        that.$message.error('请检查网络是否通畅');
    });
      },
      searchByTags(t){
          this.getListData(this.$session.get('USERID'),null,t);
      },
      favoriteUser(fuserId,isFavorite){
          var id = this.$session.get('USERID');
          if(id == '' || typeof id === 'undefined'){
               this.$message({
          message: '请先登录再进行操作',
          type: 'warning'
        });
        return false;
          }
           var that = this;
          that.$axios.post('user/favorite',{userId:id,
                                            fUserId:fuserId,
                                            isFavorite:isFavorite}).then(function(res){
               if(res.data.code == 200){
                      that.$message({
                   message: res.data.body,
                   type: 'success'
        });
        that.getListData(id,null,null);
               }
               else{
                   that.$message.error(res.data.body);
               }
    }).catch(function (error) {
        that.$message.error('请检查网络是否通畅');
    });
      },
      vote(imageId,user){
            var USERID = this.$session.get('USERID');
             if(USERID == '' || typeof USERID === 'undefined'){
               this.$message({
          message: '请先登录再进行操作',
          type: 'warning'
        });
        return false;}
          var that = this;
          that.$axios.post('share/vote',{imgId:imageId,opUserId:USERID,userId:user}).then(function(res){
               if(res.data.code == 200){
                      that.$message({
                   message: '投票成功',
                   type: 'success'
        });
        that.getListData(null,null,null);
               }
               else{
                   that.$message.error(res.data.body);
               }
    }).catch(function (error) {
        that.$message.error('请检查网络是否通畅');
    });
      },
      getListData(id,content,tags){
          var that = this;
            that.$axios.post('share/queryShare',{userId:id,
            content:content,
            tags:tags
            }).then(function(res){
               if(res.data.code == 200){
                    that.shareList = res.data.body;
                    that.loading = false;
               }
    }).catch(function (error) {
        that.$message.error('加载失败,请检查网络是否通畅');
    });
      }
  },
  chekIsLogin(){
     var id = this.$session.get('USERID');
          if(id == '' || typeof id === 'undefined'){
               this.$message({
          message: '请先登录再进行操作',
          type: 'warning'
        });
        return false;
          } 
          else
          return true;
  }
}
</script>
<style scoped>
.commentArea{
    padding:10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.commentAvatar{
    float:left;
}
.ava{
    border:1px solid black;
    margin:3px;
}
.commentText{
    padding:10px;
    font-size:16px;
    line-height:30px;
    height:30px;
    float:right;
}
.comment{
    margin-bottom:20px;
    color:#303133;
    font-size:16px;
}
.time{
    font-size:12px; 
    float:right;
}
body{
   overflow-x: scroll; 
    white-space: nowrap;
}
#c{
    width:250px;
    margin-left:70%;
    position:fixed;
    z-index:99999;
}
#mainFrame{
    margin-bottom:20px;
}
.listText{
    float:left;
    margin-left:0px;
}
.listFoot{
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid #DCDCDC;
}
.listProgess{
    margin-top:-30px;
}
.listImage{
    width:180px;
    height:180px;
}

.icon{
    position:relative;
    top:-210px;
    left:70px;
}

.vs{
    width:100px;
    height:100px;
}
.listTitle{
    float:left;
    line-height:50px;
    width:100%;
}
.listLabel{
    background-color:#FFCC00;
    margin-top:5px;
    margin-left:5px;
    font-size:12px;
}
.listContent{
    margin-top:20px;
    margin-bottom:20px;
    padding-left:50px;
    font-size:15px;
}
.container{
    margin-bottom:20px;
    background-color:#FFF;
    padding:20px;
}
</style>